<template>
  <div class="already-recycle">
    <head-top head-title="已回收" goBack="true"></head-top>
    <div class="areas-name border-bottom">
      <span>小区名称：{{$route.params.name}}</span>
    </div>
    <div class="areas-count border-bottom">
      <span>已回收总户数：<span style="color: #0078de; font-size: 14px">{{recycleList.length}}户</span></span>
    </div>
    <div class="already">
      <div class="vote-wrapper">
        <ul class="toupiao-wrapper" ref="yitoupiao">
          <li class="tou-wrapper border-bottom-last" v-for="(item,index) in recycleList" :key="index">
            <div class="left">{{item.areasName}}</div>
            <div class="right">
              <div class="yi-color">已回收</div>
              <input class="yi-input" type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
              <label :for="item.id"></label>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import { lookRecycleVote } from '../../api/toupiaotongji.js'

  export default {
    name: 'AlreadyRecycle',
    data () {
      return {
        recycleList: [],
        areasName: ''
      }
    },
    components: {
      headTop
    },
    created () {
      this._lookRecycleVote()
    },
    methods: {
      _lookRecycleVote () {
        lookRecycleVote(this.$route.params.vid).then(res => {
          if (res.code === 200) {
            var nullArr = []
            var recycleArr = res.data
            for (var item in recycleArr) {
              nullArr.push(recycleArr[item])
            }
            this.recycleList = nullArr
            // console.log(this.recycleList)
            this.recycleList.forEach(item => {
              this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .already-recycle {
    padding-top: 40px;
    .areas-name {
      background: #fff;
      width: 100%;
      position: fixed;
      top: 40px;
      left: 0;
      display: flex;
      padding: 0px 10px;
      box-sizing: border-box;
      height: 35px;
      line-height: 35px;
      color: #666;
      z-index: 2;
      span {
        flex: 1;
        font-size: 13px;
      }
    }
    .areas-count {
      background: #fff;
      width: 100%;
      position: fixed;
      top: 75px;
      left: 0;
      display: flex;
      padding: 0px 10px;
      box-sizing: border-box;
      height: 35px;
      line-height: 35px;
      color: #666;
      z-index: 2;
      span {
        flex: 1;
        font-size: 13px;
      }
    }
    .already {
      .vote-wrapper {
        margin-top: 70px;
        .toupiao-wrapper {
          -webkit-overflow-scrolling: touch;
          .tou-wrapper {
            margin: 0 10px;
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            .left {
              display: inline;
              text-align: left;
            }
            .right {
              text-align: right;
              position: relative;
              top: -42px;
              height: 44px;
              input[type='checkbox'] {
                display: none
              }
              label {
                position: absolute;
                right: -8px;
                top: 12px;
              }
              label:before {
                content: '';
                position: absolute;
                left: -30px;
                top: 0;
                width: 16px;
                height: 16px;
                border: 1px solid #ddd;
                border-radius: 50%;
                transition: all 0.3s ease;
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
              }
              label:after {
                content: '';
                position: absolute;
                left: -23px;
                top: 3px;
                width: 4px;
                height: 10px;
                border: 0;
                border-right: 1px solid #fff;
                border-bottom: 1px solid #fff;
                background: #fff;
                transform: rotate(45deg);
                transition: all 0.3s ease;
              }
              input[type='checkbox']:checked + label:before {
                background: #0087de;
                border-color: #0087de;
              }
              input[type='checkbox']:checked + label:after {
                background: #0087de;
              }
              .yi-color {
                color: #000 !important;
                margin-right: 25px;
              }
            }
          }
        }
      }
    }
  }
</style>

